/* eslint-disable eqeqeq */
<template>
  <div class="menu-tree-container">

    <el-input style="margin-bottom:10px"
              placeholder="搜索分类"
              prefix-icon="el-icon-search"
              v-model="filterText">
    </el-input>
    <div style="height:400px;overflow-y:auto;">
      <el-tree class="treeShow"
               :data="isPersonLibraryPage==true?personLibraryObsArr:menuTree"
               :props="isPersonLibraryPage==true?perLibDefProps:defaultProps"
               :label="isPersonLibraryPage==true?'node_name':'menu_name'"
               :node-key="isPersonLibraryPage==true?'node_id':'unique_id'"
               ref="organizationTree"
               :highlight-current="true"
               :filter-node-method="filterNode"
               :expand-on-click-node="true"
               @node-contextmenu="rihgtClick"
               @node-click="getId"
               :default-expanded-keys="selectedNodeList"
               :auto-expand-parent="false"
               draggable
               :accordion="false"
               :check-strictly="true"
               :show-checkbox="checkbox">
        <span class="slot-t-node"
              v-if="isPersonLibraryPage==false"
              slot-scope="{ node, data }">
          <span v-show="!node.isEdit">
            <span v-show="data.children_list && data.children_list.length >= 1">
              <i class="fa"
                 :class="{'fa-building':data.node_type==='1','fa-institution':data.node_type==='2','fa-user-circle':data.node_type==='3'}" />
              <span :class="[data.id >= maxexpandId ? 'slot-t-node--label' : '']"
                    :title="data.system_name||data.menu_name">{{data.name}}</span>
            </span>
            <!-- 当树形节点不存在子节点时，设置单独的图标 -->
            <span v-show="!data.children_list || data.children_list.length == 0">
              <i class="fa"
                 :class="{'fa-building':data.node_type==='1','fa-institution':data.node_type==='2','fa-user-circle':data.node_type==='3'}"></i>
              <span :class="[data.id >= maxexpandId ? 'slot-t-node--label' : '']"
                    :title="data.system_name||data.menu_name">{{data.name }}</span>
            </span>
          </span>
          <!-- 编辑输入框 -->
          <span v-show="node.isEdit">
            <el-input class="slot-t-input"
                      size="mini"
                      autofocus
                      v-model="data.name"
                      :ref="'slotTreeInput'+data.id"
                      @blur.stop="NodeBlur(node, data)"
                      @keyup.enter.native="NodeBlur(node, data)"></el-input>
          </span>
        </span>
        <span class="slot-t-node"
              v-else
              slot-scope="{ node, data }">
          <span v-show="!node.isEdit">
            <span v-show="data.children && data.children.length >= 1">
              <!-- <i class="fa"
                 :class="{'fa-building':data.node_type==='1','fa-institution':data.node_type==='2','fa-user-circle':data.node_type==='3'}" /> -->
              <img :src="data.node_type==='1'? require(`@/assets/guideImg/dw-ic.png`)  : data.node_type==='2' ? require(`@/assets/guideImg/bm-ic.png`) : require(`@/assets/guideImg/gw-ic.png`) "
                   alt="">
              <span :class="[data.node_id >= maxexpandId ? 'slot-t-node--label' : '']"
                    :title="data.system_name||data.node_name">{{data.node_name}}</span>
            </span>
            <!-- 当树形节点不存在子节点时，设置单独的图标 -->
            <span v-show="!data.children || data.children.length == 0">
              <!-- <i class="fa"
                 :class="{'fa-building':data.node_type==='1','fa-institution':data.node_type==='2','fa-user-circle':data.node_type==='3'}"></i> -->
              <img :src="data.node_type==='1'? require(`@/assets/guideImg/dw-ic.png`)  : data.node_type==='2' ? require(`@/assets/guideImg/bm-ic.png`) : require(`@/assets/guideImg/gw-ic.png`) "
                   alt="">
              <span :class="[data.node_id >= maxexpandId ? 'slot-t-node--label' : '']"
                    :title="data.system_name||data.node_name">{{data.node_name }}</span>
            </span>
          </span>
          <!-- 编辑输入框 -->
          <span v-show="node.isEdit">
            <el-input class="slot-t-input"
                      size="mini"
                      autofocus
                      v-model="data.node_name"
                      :ref="'slotTreeInput'+data.node_id"
                      @blur.stop="NodeBlur(node, data)"
                      @keyup.enter.native="NodeBlur(node, data)"></el-input>
          </span>
        </span>

      </el-tree>
    </div>

    <!--鼠标右键点击出现页面-->
    <div v-show="menuVisible">
      <el-menu id="rightClickMenu"
               class="el-menu-vertical"
               @select="handleRightSelect"
               active-text-color="#fff"
               text-color="#fff">
        <!-- 根据不同的状态，显示不同的右键自定义菜单（岗位与非岗位状态） -->
        <el-menu-item index="1"
                      v-show="DATA.node_type==='1'"
                      class="menuItem">
          <i class="el-icon-plus" />
          <span slot="title">新增子单位</span>
        </el-menu-item>
        <el-menu-item index="2"
                      class="menuItem"
                      v-show="DATA.node_type!=='3'">
          <i class="el-icon-edit" />
          <span slot="title">新增部门</span>
        </el-menu-item>
        <el-menu-item index="3"
                      class="menuItem"
                      v-show="DATA.node_type==='2'">
          <i class="el-icon-edit" />
          <span slot="title">新增岗位</span>
        </el-menu-item>
        <el-menu-item index="6"
                      class="menuItem"
                      v-show="DATA.node_type==='3'">
          <i class="el-icon-edit" />
          <span slot="title">分配人员</span>
        </el-menu-item>
        <el-menu-item index="7"
                      class="menuItem"
                      v-show="DATA.node_type==='3'">
          <i class="el-icon-edit" />
          <span slot="title">分配权限模板</span>
        </el-menu-item>
        <el-menu-item index="4"
                      class="menuItem">
          <i class="el-icon-circle-plus-outline" />
          <span slot="title">修改</span>
        </el-menu-item>
        <el-menu-item index="5"
                      class="menuItem">
          <i class="el-icon-menu" />
          <span slot="title">删除</span>
        </el-menu-item>

      </el-menu>
    </div>

  </div>
</template>
<script>
import { organizationApi } from '@/services/CompanySetting'

// import api from '../../resource/api.js'

export default {
  name: 'OrganizationTreeTemp',
  components: {

  },
  data () {
    return {
      judge: '',
      filterText: '',
      NODE: {},
      DATA: {},
      maxexpandId: 95, // 新增节点开始id
      non_maxexpandId: 95, // 新增节点开始id(不更改)
      isLoadingTree: true, // 是否加载节点树
      //   setTree:api.treelist,//节点树数据
      perLibDefProps: {
        children: 'children',
        label: 'node_name',
        disabled: (data) => {
          return data.node_type !== '3'
        }
      },
      defaultProps: {
        children: 'children',
        label: 'name',
        disabled: (data) => {
          return data.node_type !== '3'
        }
      },
      menuVisible: false,
      objectID: null,

      // 编辑或新增
      addOrEdit: 'add',
      // 选中的节点列表，用于刷新后展开到指定位置
      selectedNodeList: [],

    }
  },
  props: {
    personLibraryObsArr: {
      type: Array,
      default: () => {
        return []
      }
    },
    isPersonLibraryPage: {//默认不是人员库页面的左边树的数据
      type: Boolean,
      default: () => {
        return false
      }
    },
    curMenu: Object,
    assignedNode: Object,
    assignedTemplateNode: Object,
    // 复选框
    checkbox: {
      type: Boolean,
      default: false
    },
    // 是否启用右键菜单编辑功能
    rightMenu: {
      type: Boolean,
      default: true
    },
    selectProject: {
      type: Boolean,
      default: false
    },
    // 筛选职能部门或项目部门，0表示全部，1表示职能部门，2表示项目部门
    deptSort: {
      type: Number,
      default: 0
    }
  },

  methods: {
    // 新增
    onAdd () {
      this.judge = 1
    },
    onEdit () {
      this.judge = 2
    },
    // 节点点击事件获取id
    getId (data, node) {
      // console.log(data, 'click')
      let curData = JSON.parse(JSON.stringify(data))
      // console.log(curData.children_list)
      this.menuVisible = false
      this.$emit('update:curMenu', curData)

      if ((node.expanded || node.childNodes.length === 0) && data.unique_id) {
        this.addNodeList(data.unique_id)
      } else {
        this.removeNodeList(data.unique_id)
      }
    },
    // 当当前节点是展开操作时,将当前节点的object_id添加到selectedNodeList中，为了刷新数据后能够展开到指定位置
    addNodeList (id) {
      // console.log('addNodeList-id=', id)
      let index = this.selectedNodeList.indexOf(id)
      if (index < 0) {
        this.selectedNodeList.push(id)
      }
      // console.log(' this.selectedNodeList=', this.selectedNodeList)
    },
    // 当前节点是收起操作时，将当前节点的object_id从selectedNodeList中移除
    removeNodeList (id) {
      let index = this.selectedNodeList.indexOf(id)
      if (index >= 0) {
        this.selectedNodeList.splice(index, 1)
      }
    },
    // 对树节点进行筛选时执行的方法，返回 true 表示这个节点可以显示，返回 false 则表示这个节点会被隐藏
    filterNode (value, data) {
      console.log('value:', value)
      console.log('data:', data)
      if (!value) return true
      // return data.menu_name.indexOf(value) !== -1
      return data.name.indexOf(value) !== -1;//工作中心-关联组织菜单中-关联按钮触发后的弹框树形模糊查询会用到
    },
    // 右键点击事件
    rihgtClick (event, object, value, element) {
      this.DATA = object
      this.NODE = value
      if (this.rightMenu) {
        this.menuVisible = !this.menuVisible
        console.log(object, value, 'right')
        document.addEventListener('click', e => {
          this.menuVisible = false
        })
        let menu = document.querySelector('#rightClickMenu')
        /* 菜单定位基于鼠标点击位置 */
        menu.style.left = event.clientX + 20 - 200 + 'px'
        menu.style.top = event.clientY - 90 + 'px'
        menu.style.position = 'absolute' // 为新创建的DIV指定绝对定位
        menu.style.width = 160 + 'px'
      }
    },
    // 右键弹出的菜单点击事件
    handleRightSelect (key) {
      if (key === '1') {
        // 新增子单位
        this.editOrg('create')
      } else if (key === '2') {
        // 新增部门
        this.editDept('create')
      } else if (key === '3') {
        // 新增岗位
        this.editJob('create')
      } else if (key === '4') {
        // 修改，需要区分单位、部门、岗位
        // node_type为1是单位，2是部门，3是岗位
        if (this.DATA.node_type === '1') {
          this.editOrg('update')
        } else if (this.DATA.node_type === '2') {
          this.editDept('update')
        } else if (this.DATA.node_type === '3') {
          this.editJob('update')
        }
      } else if (key === '5') {
        // 删除功能，需要区分单位、部门、岗位
        this.NodeDel(this.NODE, this.DATA)
      } else if (key === '6') {
        // 分配人员
        this.$emit('update:assignedNode', this.DATA)
      } else if (key === '7') {
        // 分配权限模板
        this.$emit('update:assignedTemplateNode', this.DATA)
      }
      this.menuVisible = false
    },
    NodeBlur (n, d) {
      let idVal = this.isPersonLibraryPage == true ? d.node_id : d.id;
      // 输入框失焦
      if (n.isEdit) {
        this.$set(n, 'isEdit', false)
      }
      this.$nextTick(() => {
        this.$refs['slotTreeInput' + idVal].$refs.input.focus()
      })
    },
    NodeDel (n, d) {
      // 删除节点
      console.log(d, 'delete tree')
      if (d.children && d.children.length !== 0) {
        this.$message.error('此菜单有子菜单，不可删除！')
        return false
      } else {
        // 二次确认
        let ConfirmFun = () => {
          this.$confirm('是否删除此菜单？', '提示', {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning'
          })
            .then(() => {
              if (this.DATA.node_type === '1') {
                this.deleteOrg()
              } else if (this.DATA.node_type === '2') {
                this.deleteDept()
              } else if (this.DATA.node_type === '3') {
                this.deleteJob()
              }
            })
            .catch(() => { })
        }
        // 判断是否是新增节点
        ConfirmFun()
      }
    },
    // 新增或修改单位弹框
    editOrg (type) {
      this.editOrgDialogVisible = true
      this.editOrgDialogForm = this.DATA
      this.editOrgDialogStatus = type
    },
    // 新增或修改部门弹框
    editDept (type) {
      this.editDeptDialogVisible = true
      this.editDeptDialogForm = this.DATA
      this.editDeptDialogStatus = type
    },
    // 新增或修改岗位弹框
    editJob (type) {
      this.editJobDialogVisible = true
      this.edittJobDialogForm = this.DATA
      this.editJobDialogStatus = type
    },
    // 删除单位
    deleteOrg () {
      organizationApi.deleteOrg({
        data: {
          org_id: this.DATA.id,
          org_no: this.DATA.org_no
        }
      }).then(res => {
        console.log(res, 'delete org')
        if (res.code === 0) {
          this.$message.success('删除单位成功')
          this.getOrgTree()
        }
      })
    },
    // 删除部门
    deleteDept () {
      organizationApi.deleteDept({
        data: {
          dept_id: this.DATA.id,
          dept_no: this.DATA.no
        }
      }).then(res => {
        console.log(res, 'delete dept')
        if (res.code === 0) {
          this.$message.success('删除部门成功')
          this.getOrgTree()
        }
      })
    },
    // 删除岗位
    deleteJob () {
      organizationApi.deleteJob({
        data: {
          job_id: this.DATA.id
        }
      }).then(res => {
        console.log(res, 'delete job')
        if (res.code === 0) {
          this.$message.success('删除岗位成功')
          this.getOrgTree()
        }
      })
    },
    // 处理传入的数据，因为后端都是children_list，需要手动赋值一个children字段
    handelData (arr) {
      // console.log('selectProject', this.selectProject)
      if (Object.prototype.toString.call(arr) === '[object Array]') {
        for (let i = 0; i < arr.length; i++) {
          let item = arr[i]
          // console.log(item, this.deptSort, 'dept sortt')
          item.uniqId = item.id + item.no
          // 筛选职能部门或项目部门
          if (item.node_type === '2' && this.deptSort !== 0) {
            if (Number(item.dept_type) !== this.deptSort) {
              // arr.splice(i, 1)
              // i--
              item.disabled = true
            }
          } else {
            if (item.children_list) {
              item.children = item.children_list
              this.handelData(item.children_list)
            } else if (item.childrens) {
              item.children = item.childrens
              this.handelData(item.childrens)
            }
            // console.log('selectProject', item)
            if (this.selectProject === true) {
              if (item.node_type === '2') {
                item.children = []
              }
            }
            if (item.sid) {
              item.menu_id = item.sid
            }
            if (item.menu_id === '') {
              item.menu_id = '0'
            }
          }
        }

        return arr
      }
    },
    // 获取组织树数据
    getOrgTree () {
      organizationApi.getOrgTree({

      }).then(res => {
        console.log(res, 'get org tree')
        let data = res.data
        console.log(data, 'handle data')
        this.$store.dispatch('setOrgainzationTree', data)
        window.localStorage.setItem('platformOrganizationTree', JSON.stringify(data))
      }, err => {
        console.log(err)
      })
    },
    // 编辑成功回调
    editCallback () {
      this.getOrgTree()
    }
  },

  watch: {
    filterText (val) {
      // this.selectedNodeList = '100';
      console.log('selectedNodeList=', this.selectedNodeList)
      this.$refs.organizationTree.filter(val)
    }

  },
  computed: {
    menuTree () {
      let store = this.$store.state.orgainzationTree
      let storage = JSON.parse(window.localStorage.getItem('platformOrganizationTree')) || []
      let treeData = store.length > 0 ? store : storage
      if (Object.prototype.toString.call(treeData) === '[object Array]') {
        treeData = this.handelData(treeData)
      } else {
        treeData = this.handelData([treeData])
      }

      return treeData
    }
  },
  created () {
    // this.treelist=this.messageinfo
    this.selectedNodeList = []
  },
  mounted () {
  }
}
</script>
<style lang="scss" scoped>
/deep/ .el-tree {
  //height: 100% !important;
}

/* 去掉默认的树形图标 */
/* .treeShow /deep/ .el-tree-node__content>.el-tree-node__expand-icon {
  display: none;
} */
#save-style {
  background: rgba(26, 188, 156, 1);
  color: white;
}

#back-style {
  background: rgba(26, 188, 156, 1);
}

#show-ellipsis {
  //display: block;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.popover-new {
  /* position: absolute!important;
    right: 0;
    bottom: 0; */
}

/*顶部按钮*/
.slot-tree .slot-t-top {
  margin-bottom: 15px;
}

.slot-tree .slot-t-node span {
  display: inline-block;
}

/*节点*/
.slot-tree .slot-t-node--label {
  font-weight: 600;
}

/*输入框*/
.slot-tree .slot-t-input .el-input__inner {
  height: 26px;
  line-height: 26px;
}

/*按钮列表*/
.slot-tree .slot-t-node .slot-t-icons {
  display: none;
  margin-left: 10px;
}

.slot-tree .slot-t-icons .el-button + .el-button {
  margin-left: 6px;
}

.slot-tree .el-tree-node__content:hover .slot-t-icons {
  display: inline-block;
}

/*************************标签鼠标右击页面样式******************************/
.el-menu-vertical {
  /* border: 3px solid rgb(84, 92, 100); */
  border: 2px solid #f5f7fa;
  border-radius: 10px;
  z-index: 100;
}

.el-menu-vertical i {
  color: #777777;
}

.menuItem {
  height: 40px;
  line-height: 40px;
  /* background-color: #545c64; */
  background-color: #f5f7fa;
  font-size: 14px;
}

/deep/ .menuItem i {
  color: #606266 !important;
}

/deep/ .menuItem span {
  color: #606266 !important;
}

.menuItem:hover {
  background-color: #409eff;
}

/deep/ .menuItem:hover i {
  color: #fff !important;
}

/deep/ .menuItem:hover span {
  color: #fff !important;
}

.add_tips /deep/ .el-form-item__label {
  /* padding-left: 28px; */
}

.menu-tree-container {
  min-height: 350px;
}

.organization-tree-container {
  margin-top: 20px !important;
  width: 100% !important;
  min-height: 260px;
  background-color: #fff;
}
</style>